<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
    <div class="upload">
        <div class="steps">
            <div class="step">
                <div class="header"><i class="el-icon-download"></i>第1步</div>
                <div class="body">下载{{importType}}模板文件</div>
                <div class="footer">
                    <el-button type="default" @click="downloadTpl" size="small" icon="el-icon-download">下载模板</el-button>
                </div>
            </div>

            <div class="step">
                <div class="header"><i class="el-icon-edit"></i>第2步</div>
                <div class="body">
                    双击打开下载的模板文件，按照说明中规定的格式，填写{{importType}}数据。
                </div>
                <div class="footer"></div>
            </div>

            <div class="step">
                <div class="header"><i class="el-icon-upload"></i>第3步</div>
                <div class="body">
                    根据要求填写数据后，将文件上传，系统将会批量导入数据到后台，如数据格式错误，将会给出错误提示，请根据错误提示修改数据，再重新上传
                </div>
                <div class="footer">
                    <el-upload v-loading="uploading" :action="api" :multiple="false" size="mini"
                        :before-upload="beforeExcelUpload" :show-file-list="false" :headers="handlers" :data="data"
                        name="file" :on-change="uploadChange">
                        <el-button :disabled="uploading" type="primary" size="small" icon="el-icon-upload">上传文件</el-button>
                    </el-upload>
                </div>
            </div>
        </div>
        <div v-if="showError" class="errors">
            <div class="error-item" v-for="(error, i) in errorItems" :key="i">{{ error.error_msg }}</div>
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            errorItems: [],
            uploading: false,
        };
    },
    props: {
        postId: { type: Number, default: null },
        api: { type: String, default: "/api/v1/uploaders" },
        data: { type: Object, default:  () => ({}) },
        tpl: { type: String, default: "" },
        importType: { type: String, default: "一房一价" },
    },

    mounted: function () { },

    computed: {
        showError: function () {
            return this.errorItems && this.errorItems.length >= 1;
        },
        handlers: function () {
            return { Authorization: `Bearer ${this.$store.state.user.token}` };
        },
    },

    watch: {
        uploading: function (newVal, oldVal) {
            this.$emit("loadChange", newVal);
        }
    },

    methods: {
        uploadChange: function (e) {
            this.uploading = false;
            console.log("文件上传状态改变", e);
            if (e.response) {
                if (e.response.status != 0) {
                    // 产生错误
                    if(e.response.data){
                        this.showExcelError(e.response.data);
                    } else {
                        this.$message.error(e.response.message);
                    }
                    
                    return;
                } else {
                    // 上传成功
                    this.$message.success("批量导入成功");
                    this.$emit("success", null);
                }
            }
        },

        showExcelError: function (error) {
            this.errorItems = error;
            console.log("error -> ", error);
            console.log("error list ", this.errorItems);
        },

        clearExcelError: function () {
            this.errorItems = [];
        },

        downloadTpl: function (e) {
            // 点击下载模板文件
            var url = './download/' + this.tpl;

            window.open(url, "_blank");

        },
        beforeExcelUpload (file) {
            console.log("file", file);
            this.uploading = false;
            this.clearExcelError();
            var type = file.type.split("/")[1];
            var allowTypes = ["vnd.ms-excel","vnd.openxmlformats-officedocument.spreadsheetml.sheet"];
            if (!allowTypes.includes(type)) {
                this.$message.error("文件格式错误，只允许上传xls文件");
                return false;
            }
            this.uploading = true;
            return true;
        },
    },
};
</script>

<style scoped>
.steps {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
}

.steps .step {
    padding: 15px;
    border: 1px solid #f4f4f4;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
}

.steps .step .header {
    width: 80px;
}

.steps .step i {
    font-size: 14px;
    margin-right: 4px;
    color: #333;
    vertical-align: center;
    line-height: 100%;
}

.steps .step .footer {
    width: 100px;
    display: flex;
    justify-content: flex-end;
}

.steps .step .body {
    font-size: 12px;
    line-height: 1.5;
    color: #333;
    text-align: left;
    width: 500px;
}

.errors {
    width: 100%;
    padding: 10px;
    max-height: 300px;
    overflow-y: scroll;
    color: red;
    background-color: #fef0f0;
    font-size: 12px;
}

.errors .error-item {
    min-height: 32px;
    line-height: 32px;
}
</style>
